<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-03-20 13:51:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-03 15:18:14
 * @FilePath: Menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 默认展开节点 -->
    <el-menu :default-active="route.path" ref="menus" :unique-opened="true" class="el-menu-vertical-demo"
      :collapse="store.isCollapse" router @open="handleOpen" @close="handleClose">
      <MenuListVue v-for="(item, index) in meanStore.menuList" :key="item.component" :menu="item"
        :index="item.component + ''" :collapse="store.isCollapse">
      </MenuListVue>
      <!-- <MenuListVue v-for="(item, index) in menuList" :key="item.path" :menu="item" :index="item.path + ''"
        :collapse="store.isCollapse">
      </MenuListVue> -->
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { PiniaStore } from '../../store'
import { useMeanStore } from '../../store/menus'
const store = PiniaStore()
const router = useRouter()
const route = useRoute()
// const openeds = ref<any>(['/Device', '/User', '/Phone', '/SysLog'])
const meanStore = useMeanStore()
const handleOpen = (command: any) => {
  // console.log(command)
  // menus.value.open(command);
}
const menus = ref<any>(null)
const handleClose = (keyPath: any) => {
  menus.value.close(keyPath);
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
  width: 100%;
}
</style>
<style lang="scss">
.el-menu {
  width: 100%;
  background-color: transparent;
  border-right: none;

  .el-icon {
    flex-shrink: initial;
  }
}

.el-menu-item {
  height: 40px !important;
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 15px;
  padding-left: 43px !important;
  border-radius: 4px;
}

.el-sub-menu {
  width: var(--el-aside-width);
  padding: 0 12px;
  box-sizing: border-box;
  font-weight: 500;

  .el-sub-menu__title {
    padding: 0 14px !important;
    color: #ffffff;
    height: 40px;
    margin-bottom: 10px;
    font-size: 16px;

    .iconfont {
      color: #ffffff;
      font-size: 15px;
      display: inline-block;
      margin-right: 10px;
    }
  }

  // .el-icon {
  //   margin-right: 5px;
  // }
}

.el-sub-menu.is-active .el-sub-menu__title {
  color: #ffffff;

  .iconfont {
    color: #ffffff;
  }
}

.el-menu--inline {
  .is-active {
    background: #B52427;
    border-radius: 4px;
  }
}

.el-menu-item.is-active {
  color: #ffffff
}

.el-menu-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

// 如果需要一级有hover效果，注释即可、或者修改
.el-sub-menu__title:hover {
  background-color: transparent;
}

.el-popper .el-menu-item {
  color: #666666;
}

.el-popper .el-menu-item:last-of-type {
  margin-bottom: 0px;
}
</style>
